<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SFERH - Registro de Parientes</title>
<jsp:include page="../includeCSSjs.jsp" />

<!-- Extream Component -->
<link rel="stylesheet" type="text/css"
	href="../resources/css/extremecomponents.css">
<script type="text/javascript"
	src="../resources/javascript/extremecomponents.js"></script>
	
<script type="text/javascript"
	src="../resources/javascript/jquery.js"></script>

<script type="text/javascript">
	function onTableClick(	idParentesto,
							idEmpleado,
							nombreFamiliar,
							idParentesco,
							idGenero,
							idPorcentajeBeneficio,
							fechaNacimientoFamiliar	) {
		alert(idEmpleado);
		$("#idParentesto").val(idParentesto);
		$("#sferhEmpleado.idEmpleado").val(idEmpleado);
		$("#nombreFamiliar").val(nombreFamiliar);
		$("#idParentesco").val(idParentesco);
		$("#idGenero").val(idGenero);
		$("#idPorcentajeBeneficio").val(idPorcentajeBeneficio);
		$("#fechaNacimientoFamiliar").val(fechaNacimientoFamiliar);
		showEditBtn();
	}

	function showEditBtn() {
		$(".btnEditar").hide("fast");
		$(".btnAgregar").hide("slow");
		$(".btnEditar").show("slow");

	}

	function hiddenEditBtn() {
		$(".btnEditar").hide("fast");
		$(".btnAgregar").show("slow");
	}
</script>

</head>
<body>
	<h2 class="divTextoEncabezado">Registro de familiares de ${parent.sferhEmpleado.nombreCompleto}</h2>

	<form:form method="post" action="addParent"
		commandName="parent">
		
		<form:errors path="*" cssClass="errorblock" element="div" />

		<table>
			<form:hidden path="idParentesto" />
			<form:hidden path="sferhEmpleado.idEmpleado"/>
			<form:hidden path="sferhEmpleado.nombreCompleto"/>			
			
			<tr>
				<td><form:label path="catParentesco.idParentesco" class="text0">Parentesco</form:label></td>
        		<td>
        		<form:select path="catParentesco.idParentesco" id="idParentesco" style="width:80px">
            		<form:options items="${listParentesco}" itemValue="idParentesco" itemLabel="parentesco"  />
            	</form:select>
            	</td>
			</tr>
			
			<tr>
				<td><form:label path="nombreFamiliar" class="text0">Nombre de Familiar</form:label></td>
				<td><form:input path="nombreFamiliar" class="required inputTextFacturaAgregar"/></td>
				<td><form:errors path="nombreFamiliar*" cssClass="error" /></td>
			</tr>
			
			<tr>
				<td><form:label path="idGenero" class="text0">Genero</form:label></td>
        		<td>
        		<form:select path="idGenero" id="idGenero" style="width:100px">
            		<form:options items="${genList}" itemValue="idGenero" itemLabel="genero"  />
            	</form:select>
            	</td>
			</tr>
			
			<tr>
				<td><form:label path="fechaNacimientoFamiliar" class="text0">DOB</form:label></td>
				<td><form:input path="fechaNacimientoFamiliar" class="required inputTextFacturaAgregar"/></td>
				<td><form:errors path="fechaNacimientoFamiliar*" cssClass="error" /></td>
			</tr>						
			<tr>
				<td><form:label path="catPorcentajeBeneficio.idPorcentajeBeneficio" class="text0">Porcentaje Beneficio</form:label></td>
        		<td>
        		<form:select path="catPorcentajeBeneficio.idPorcentajeBeneficio" id="idPorcentajeBeneficio" style="width:80px">
            		<form:options items="${benList}" itemValue="idPorcentajeBeneficio" itemLabel="porcentajeBeneficio"  />
            	</form:select>
            	</td>
			</tr>
		</table>
		<center>
				<div class='btnAgregar'>
					<input type=image src="../resources/img/boton_agregar.png"
						width="95" height="30" class="inputBoton">
				</div>
				<div class="btnEditar" style="display: none;">
					<input type=image src="../resources/img/boton_guardar.png"
						width="95" height="30" class="inputBoton"
						onclick="edit('parent','editParent')"> 
					<input type=image src="../resources/img/btn_eliminar.png" width="95"
						height="30" class="inputBoton"
						onclick="edit('parent','')"> 
					<input type=image src="../resources/img/btn_cancelar.png" width="95" 
						height="30"	class="inputBoton" 
						onclick="edit('parent','showParentDet')">
				</div>
			</center>
	</form:form>
	
	<!-- Extreme Table  -->
	<ec:table items="parentList"		
		action="${pageContext.request.contextPath}/admin/showParentDet?idEmpleado=${parent.sferhEmpleado.idEmpleado}"
		view="compact"
		imagePath="${pageContext.request.contextPath}/resources/images/compact/*.gif"
		rowsDisplayed="8" autoIncludeParameters="false" var="parent">
		
		

		<ec:row highlightRow="true" 
		onclick="onTableClick(	'${pageScope.parent.id.idParentesto}',
								'${pageScope.parent.id.idEmpleado}',
								'${pageScope.parent.id.nombreFamiliar}',
								'${pageScope.parent.id.idParentesco}',
								'${pageScope.parent.id.idGenero}',
								'${pageScope.parent.id.idPorcentajeBeneficio}',								    					
    							'${pageScope.parent.id.fechaNacimientoFamiliar}');">
			<ec:column property="id.idParentesto" title="Id" />
			<ec:column property="id.nombreCompleto" title="Nombre del Empleado" />
			<ec:column property="id.nombreFamiliar" title="Nombre del Familiar" />
			<ec:column property="id.parentesco" title="Parentesco" />
			<ec:column property="id.genero" title="Genero" />
			<ec:column property="id.porcentajeBeneficio" title="Beneficio" />
			<ec:column property="id.fechaNacimientoFamiliar" title="Fecha Nac."/>
						
		</ec:row>
	</ec:table>
</body>
</html>